<template>
  <div class="badgeWhite baseContent" :style="dataRend.style">
    <basetitle>
      <slot slot="left">{{dataRend.name}}</slot>
      <!--<slot slot="right">-->
        <!--<div class="rightFontCont">-->
          <!--<i class="iconfont icon-shuaxin1 rightFont" @click="refreshFull(dataRend.prn)"></i>-->
        <!--</div>-->
      <!--</slot>-->
    </basetitle>
    <div class="baseCont">
      <div class="chart-container overAuto" v-if="dataRend.itemData"  :style="{ height: dataRend.itemData.height ? dataRend.itemData.height : defalutHeight }">
          <el-row>
            <el-col style="padding:0 10px" class="tc" :span="8" v-for="(item, index) in dataRend.itemData.list" :key="index">
              <div style="box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);">
                <p style="color: #409eff;font-weight: bold;padding: 15px 0 0 0;margin-bottom: 0;font-size: 14px;">{{item.title}}</p>
                <p style="color: #8C8C8C;font-size: 12px;margin-top: 5px;">{{item.timeStr}}</p>
                <CircularCharts2
                  ref="tempAlarmRef"
                  :pieStation="'50%'"
                  :dialSize="'90%'"
                  height="130px"
                  :valueFontSize="'14'"
                  :showName="''"
                  :id="getMixed(index)"
                  :axisLabelShow="false"
                  :axisLineWidth="'14'"
                  :splitLineShow="false"
                  :itemdata="item.charts"
                  intype="kpi2"
                  />
              </div>
            </el-col>
          </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  const basetitle =()=>import('@/components/basetitle/index.vue')//
  const  CircularCharts2 =()=>import('@/components/Charts/CircularCharts2.vue')//仪表盘
  import { generateMixed } from '@/utils/index.js';
  import {refreshContent} from "../../../api/config.js"
  import store from '../../../store'
  import { mapState, mapActions } from 'vuex'
  import { getFromCache } from '@/utils/cache.js';
  export default {
    name: 'TempAlarm',
    props: {
      defalutHeight: {
        type: String,
        default: '300px'
      },
      itemdata: {
        default: Object
      }
    },
    components: {
      basetitle,
      CircularCharts2
    },
    data() {
      return {
        dataRend:{},
        active:false,
        timer1:null
      };
    },
    computed: {
      ...mapState({
        mainRend:state => store.state.base.mainRend
      }),
    },
    beforeDestroy() {

    },
    mounted() {
      this.dataRend=this.itemdata;
      // this.timeOutRefresh();
      this.refreshFull(this.dataRend.prn);
    },
    methods: {
      ...mapActions('base', ['getIndexRend']),
      timeOutRefresh(){
        this.refreshFull(this.dataRend.prn);
        this.timer1 && clearTimeout(this.timer1);
        this.timer1 = setTimeout(()=>{
          this.timeOutRefresh();
        },3000);
      },
      getMixed(i){
        return generateMixed('8')+i
      },
      refreshFull(type){
        let that=this;
        that.active=true;
        let parms={};
        parms.type=type;
        parms.user_prn = JSON.parse(getFromCache('userInfo')).env$user_prn;
        that.$post(refreshContent, parms).then(response => {
          that.dataRend=response.obj;
          that.$refs.tempAlarmRef.forEach(v=>{
            v.initChart();
          });
          that.timer1 && clearTimeout(that.timer1);
          that.timer1 = setTimeout(()=>{
            that.refreshFull(type);
          },3000);
        })
      }
    }
  };
</script>

<style>

</style>
